<template>
  <div class="container">
    <div class="item">
      <div class="chartOne" ref="chartOne"></div>
    </div>
    <div class="item">
      <div class="chartTwo" ref="chartTwo"></div>
    </div>
    <div class="item">
      <div class="chartThree" ref="chartThree"></div>
    </div>
    <div class="item">
      <div class="chartFour" ref="chartFour"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { chartOption as oneOption } from "@/views/echarts/ts/barOne";
import { chartOption as twoOption } from "@/views/echarts/ts/barTwo";
import { chartOption as threeOption } from "@/views/echarts/ts/barThree";
import { chartOption as fourOption } from "@/views/echarts/ts/barFour";
const chartOne = ref<HTMLDivElement | null>(null);
const chartTwo = ref<HTMLDivElement | null>(null);
const chartThree = ref<HTMLDivElement | null>(null);
const chartFour = ref<HTMLDivElement | null>(null);
let myOne: any, myTwo: any, myThree: any, myFour: any;
const chartOneData = {
  xData: ["2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019"],
  colorList: [
    ["#fccb05", "#f5804d"],
    ["#8bd46e", "#09bcb7"],
    ["#248ff7", "#6851f1"],
  ],
  seriesData: [
    [400, 400, 300, 300, 300, 400, 400, 400, 300],
    [400, 500, 500, 500, 500, 400, 400, 500, 500],
    [400, 600, 700, 700, 1000, 400, 400, 600, 700],
  ],
};
const chartTwoData = {
  xData: ["2020", "2022", "2023"],
  yData: [7, 17, 35],
  colorList: ["#34DCFF", "transparent"],
};
const chartThreeData = {
  xData: [60, 70, 80],
  yData: ["2020", "2022", "2023"],
  labelData: ["725", "869", "978"],
  colorList: ["#fccb05", "#8bd46e", "#248ff7"],
};
const chartFourData = {
  xData: ["周一", "周二", "周三", "周四"],
  barData: [50, 78, 60, 65],
  lineData: ["27", "29", "35", "33"],
};
function initOne() {
  if (myOne) {
    myOne.clear();
  }
  myOne = echarts.init(chartOne.value);
  myOne.setOption(oneOption(chartOneData));
}
function initTwo() {
  if (myTwo) {
    myTwo.clear();
  }
  myTwo = echarts.init(chartTwo.value);
  myTwo.setOption(twoOption(chartTwoData));
}
function initThree() {
  if (myThree) {
    myThree.clear();
  }
  myThree = echarts.init(chartThree.value);
  myThree.setOption(threeOption(chartThreeData));
}
function initFour() {
  if (myFour) {
    myFour.clear();
  }
  myFour = echarts.init(chartFour.value);
  myFour.setOption(fourOption(chartFourData));
}
function initChart() {
  initOne();
  initTwo();
  initThree();
  initFour();
}

onMounted(() => {
  initChart();
});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 45%;
    height: 45%;
    .chartOne,
    .chartTwo,
    .chartThree,
    .chartFour {
      width: 100%;
      height: 100%;
    }
  }
}
</style>